<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位的元素布局</title>
     <style>
          /* 
                水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度

                - 当我们开启了绝对定位后:
                    水平方向的布局等式就需要添加left 和 right 两个值
                        此时规则和之前一样只是多添加了两个值：
                            当发生过度约束：
                                如果9个值中没有 auto 则自动调整right值以使等式满足
                                如果有auto，则自动调整auto的值以使等式满足

                        - 可设置auto的值
                            margin width left right

                        - 因为left 和 right的值默认是auto，所以如果不指定left和right
                            则等式不满足时，会自动调整这两个值(其实还是在调整right值)


                    垂直方向布局的等式的也必须要满足
                        top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
          
          也就是说开启绝对定位的元素如果发生过渡约束，那么不会优先去调节
          margin-right而是优先调节right,如果我们想让元素在父元素中水平居中
          只能让margin-left和margin-right的值为auto，所以我们要把left和
          right设置为0

          其实这个 在强调的是如果left和right的值是自动分配的话那么它们不会想margin-left和margin-right一样平均分配
          而会优先调整right的值  只有显示声明right和lift的值后，left和right才不会自动调整 这个时候就是margin自动调整了
          因为margin-left,margin-right都是margin的属性因此将它们设置为auto之后它们会自动的调整

            
             */
         *{
             padding: 0;
             margin: 0;
         }

         .box1{
             width: 500px;
             height: 500px;
             background-color: powderblue;
             position: relative;
         }

         .box2{
             width: 200px;
             height: 200px;
             background-color: royalblue;
             position:absolute;
           
            right: 0;
            left: 0;
            
            

         }
     </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>